<template>
  <section class="panel">
    <h4>潜在合作关系图</h4>
    <div v-if="loading" class="no-data">
      <loading1 :emptyText="emptyText" />
    </div>
    <div
      v-else
      :id="achievementId"
      style="width: 100%; height: 500px"
    ></div>
  </section>
</template>

<script>
import Ecolors from "@/utils/chartColors";
export default {
  props: {
    achievementId: {
      String
    }
  },
  data() {
    return {
      chart: null,
      loading: true,
      emptyText: ''
    };
  },
  methods: {
    init(keyword) {
      if (keyword !== "") {
        this.keyword = keyword;
        this.getChartData();
      }
    },
    // 潜在合作关系图
    getChartData() {
      this.loading = true
      this.emptyText = '数据加载中...'

      if (this.chart) {
        this.chart.clear()
      }

      this.$post(this.$Url.achievement.transformPn, {
        should: {
          apn: this.keyword,
          pn: this.keyword,
        },
        aggs: [
          {
            size: "1",
            field: "ipc_kind",
            type: "base",
          },
          {
            size: "1",
            field: "province",
            type: "base",
          },
        ],
      })
        .then((res) => {
          let data = res.data || []
          if (data.length > 0) {
            this.loading = false
            let node = [];
            let link = [];
            // 取关系
            for (let i in data) {
              node.push(data[i].src);
              node.push(data[i].target);
              link.push({
                source: data[i].src,
                target: data[i].target,
                value: data[i].count,
                // info: data[i].info
              });
            }
            // 取节点
            node = Array.from(new Set(node));
            let nodejson = [];
            for (let i in node) {
              nodejson.push({
                name: node[i],
              });
            }

            this.renderChart(nodejson, link)
          } else {
            this.emptyText = '暂未找到相关潜在合作企业'
          }
        })
        .catch((err) => {
          this.emptyText = '暂未找到相关潜在合作企业'
        });
    },
    renderChart(node, link) {
      let option = {
        title: {
          show: false,
        },
        tooltip: {
          trigger: "item",
          triggerOn: "mousemove",
          formatter: (param) => {
            // let data = param.data || {}
            // let str = `${data.source}：${data.target}`
            return param.name
          }
        },
        color: Ecolors.color,
        series: [
          {
            type: "sankey",
            data: node,
            left: 30,
            right: 230,
            links: link,
            draggable: false,
            focusNodeAdjacency: false,
            itemStyle: {
              borderWidth: 1,
              borderColor: "#aaa",
              fontSize: "10px",
            },
            lineStyle: {
              color: "source",
              curveness: 0.5,
            },
            lable: {
              fontSize: "9",
            },
          },
        ],
      };
      
      this.$nextTick(() => {
        if (!this.chart) {
          this.chart = this.$echarts.init(document.getElementById(this.achievementId))
        }
        this.chart.setOption(option)
      })
      
      
      // let that = this;
      // this.chartThree.on('click',function(prim){
      //   // console.log(prim)
      //   if(prim.dataType === 'node'){
      //     isComapny(prim.name)
      //   }else{
      //     if(prim.data.info) that.$refs.DialogPartentDetail.init(prim.data.info)
      //   }
      // })
    },
  },
};
</script>

<style lang="scss" scoped>
.panel {
  position: relative;
  // width: 100%;
  flex: 1;
  margin-bottom: 20px;
  background-color: $color51;
  h4 {
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: bold;
    background-color: $color51;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.no-data {
  position: relative;
  height: 200px;
  .empty-txt {
    padding: 20px;
    padding-top: 80px;
    text-align: center;
    font-size: 14px;
    color: $color6;
  }
}
</style>